<template>
		<main v-loading="loading1" style="margin-bottom: 14%;" class="cart_box">
		    <div style="position: relative;" class="cart_tip clearfix">
		        <span>登录后可同步电脑与手机购物车中的商品</span>
		        <a href="#" class="login">登录</a>
		    </div>
			<p style="padding-left: 14px;position: fixed;bottom: 62px;z-index: 20018;"><input @change="quanxuan" style="width: 20px;height: 20px;" type="checkbox" name="item"></p>
		    <div class="cart_content clearfix" v-for="(item,index) in cartDatas" :key="index">
				
		        <div class="cart_shop clearfix">
		            <div class="shop_info clearfix">
		                <img src="../assets/images/buy-logo.png" alt="" class="shop_icon">
		                <span class="shop_name">{{item.shop_name}}</span>
		            </div>
		            <div class="cart_free clearfix">
		                <span class="free_tip">优惠券></span>
		            </div>
		        </div>
		        <div class="cart_item" >
						<input class="input1" @change="change($event, item, index)" :checked="item.flag?true: false" type="checkbox" name="item" value="3000" />
		            <div class="cart_detial_box clearfix" >
		                <a href="#" class="cart_product_link">
		                    <img v-lazy="item.product_img_url" alt="">
		                </a>
		                <div class="item_names">
		                    <a href="#">
		                        <span>{{item.product_name}}</span>
		                    </a>
		                </div>
		                <div class="cart_weight">
		                    <i class="my_weigth">重量:0.45kg</i>
		                    <span class="my_color">颜色:AT800/16</span>
		                </div>
		                <div class="cart_product_sell">
		                    <span class="product_money">￥<strong class="real_money">{{item.product_uprice}}</strong>.00</span>
		                    <div class="cart_add clearfix">
		                        <span @click="add($event,item, index)" class="my_add">+</span>
		                        <input type="tel" class="my_count" v-model="item.goods_num">
		                        <span @click="minus(item, index)" class="my_jian">-</span>
		                    </div>
		                </div>
		            </div>
					<div>
					<mu-button @click="deletes(item.cart_id)" style="    z-index: 1001;float: right;margin-top: -10px;" flat color="primary">删除</mu-button>
				</div>
					<div class="cart_del clearfix">
		                <footerGood :sumgoods="sum" :Flag="sumFlag"></footerGood>
		            </div>
		        </div>
		    </div>
			<!-- <div class="select-control-group" >
				<ul>
					<li :key="item.product_img_url" v-for="(item, index) in cartDatas">
					<input type="checkbox">
					<div class="cart_content">
						<div class="cart_shop clearfix">
						<div class="cart_check_box">
							<div class="check_box">

							</div>
						</div>
						<div class="shop_info clearfix">
							<img src="../assets/images/buy-logo.png" alt="" class="shop_icon">
							<span class="shop_name">{{item.shop_name}}</span>
						</div>
						<div class="cart_free clearfix">
							<span class="free_tip">优惠券></span>
						</div>
						</div>
						<div class="cart_item" >
							<div class="cart_detial_box clearfix" >
								<a href="#" class="cart_product_link">
									<img v-lazy="item.product_img_url" alt="">
								</a>
								<div class="item_names">
									<a href="#">
										<span>{{item.product_name}}</span>
									</a>
								</div>
								<div class="cart_weight">
									<i class="my_weigth">重量:0.45kg</i>
									<span class="my_color">颜色:AT800/16</span>
								</div>
								<div class="cart_product_sell">
									<span class="product_money">￥<strong class="real_money">{{item.product_uprice}}</strong>.00</span>
									<div class="cart_add clearfix">
										<span @click="add($event,item, index)" class="my_add">+</span>
										<input type="tel" class="my_count" v-model="item.goods_num">
										<span @click="minus(item, index)" class="my_jian">-</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					</li>
				</ul>
				 -->
				<!-- <mu-flex class="select-control-row"  :key="item.product_img_url" v-for="(item, index) in cartDatas"   >
				<mu-checkbox  :value="item.product_uprice" v-model="checkbox" @change="change">
				</mu-checkbox> -->
				
				
				<!-- </mu-flex> -->
				<!-- <mu-flex class="select-control-row quan">
				<mu-checkbox label="全选" :input-value="checkAll" @change="handleCheckAll" :checked-icon="this.checkbox.length < this.cartDatas.length ? 'indeterminate_check_box' : undefined"></mu-checkbox>
				</mu-flex> -->
			<!-- </div> -->
			
			
		</main>
</template>
<script>
import footerGood from './CartFooter'
import {mapGetters} from 'vuex'
	export default {
		components: {
			footerGood
		},
		data(){
			return{
				cartDatas:[],
				valGoods: 1,
				sumFlag: true,
				loading1: false,
				sumGoods:[],
				check: false,
				sum:0,
				checkbox: [],
				quanxuan1: false,
				checkAll: false,
				checkAll1: false,
				cityOptions:['上海', '北京', '广州', '深圳'],
				id1:''
			}
		},
		mounted () {
			this.id1 = JSON.parse(window.sessionStorage.userInfo).user_id
			this.getCartDatas()
		},
        computed:mapGetters(['loading','hideNav', 'getUserInfo', 'goods', 'good']),
		methods:{
			getCartDatas(){
				this.loading1 = true
				this.$axios.get('/cart?uid='+this.id1).then((res)=>{
					if (res.status === 1) {
						this.cartDatas = res.databuss
					}
					this.loading1 = false
				})
			},
			add (val1,val, index) {
				this.loading1 = true
				this.valGoods = 1
				this.cartDatas[index].goods_num +=this.valGoods
				if (val.flag === 1) {
					this.sum = this.good
					this.sum += this.cartDatas[index].product_uprice
					this.$store.dispatch('goods', this.sum)
				}
				this.$axios.post('/minusGoods', {
					nums: this.cartDatas[index].goods_num,
					user_id: val.user_id,
					pruduc: val.product_id
				}).then(res => {
					if (res.status === 1) {
					} else {
					}
					this.loading1 = false
				})
			},
			minus (val, index) {
				this.loading1 = true
				this.valGoods = -1
				this.cartDatas[index].goods_num +=this.valGoods
				if (val.goods_num<1) {
					val.goods_num = 1
					return
				}
				if (val.flag === 1) {
					this.sum = this.good
					this.sum -= this.cartDatas[index].product_uprice
					this.$store.dispatch('goods', this.sum)
				}
				this.$axios.post('/minusGoods', {
					nums: this.cartDatas[index].goods_num,
					user_id: val.user_id,
					pruduc: val.product_id
				}).then(res => {
					if (res.status === 1) {
					} else {
					}
					this.loading1 = false
				})
			},
			change (e,item,index) {
				this.loading1 = true
				this.sum = 0
				if (this.quanxuan1) {
					this.sum = this.good
					if (e.target.checked) {
						this.sumGoods[index] = item.product_uprice*item.goods_num
						this.$store.dispatch('goods', this.sum + item.product_uprice*item.goods_num)
					} else {
						this.$store.dispatch('goods', this.sum - item.product_uprice*item.goods_num)
					}
					this.$axios.post('/goodadd', {
						flag: e.target.checked?1:0,
						user_id: this.id1,
						pruduc: item.product_id
					}).then(res => {
						if (res.status === 1) {
							this.getCartDatas()
						} else {
						}
						this.loading1 = false
					})
				} else {
					if (e.target.checked) {
						this.sumGoods[index] = item.product_uprice*item.goods_num
						this.$store.dispatch('goods', this.sum + item.product_uprice*item.goods_num)
					} else {
						this.sumGoods[index] = 0
						this.sumGoods.forEach(ele => {
							this.sum += ele;
						})
						this.$store.dispatch('goods', this.sum)
					}
					this.$axios.post('/goodadd', {
						flag: e.target.checked?1:0,
						user_id: this.id1,
						pruduc: item.product_id
					}).then(res => {
						if (res.status === 1) {
							this.getCartDatas()
						} else {
						}
						this.loading1 = false
					})
				}
			},
			handleCheckAll (val) {
				console.log('valdsd', val)
				this.sum = 0
				this.checkbox = []
				let arr = []
				arr = val ? this.cartDatas : []
				this.checkAll = val
				console.log('this.checkbox', this.checkbox)
				if (arr.length===0) {
					this.checkbox = []
					this.sum = 0
					this.$store.dispatch('goods', this.sum)
				} else {
					arr.forEach(res=>{
					this.checkbox.push(res.product_uprice)
					})
					this.checkbox.forEach(element => {
						this.sum+=element
					});
					this.$store.dispatch('goods', this.sum)
				}
				
			},
			handleCheckedCitiesChange (val) {
				let checkedCount = val.length;
        		this.checkAll1 = checkedCount === this.cityOptions.length;
        		this.checkAll = checkedCount > 0 && checkedCount < this.cityOptions.length;
			},
			quanxuan (e) {
				this.loading1 = true
				let arr = [...document.querySelectorAll('.input1')]
				this.sum = 0
				if (e.target.checked) {
					this.quanxuan1 = true
					arr.forEach(element => {
						element.checked = true
					})
					this.cartDatas.forEach(val => {
						this.sum+=val.goods_num*val.product_uprice
					})
					this.$axios.post('/checkAll', {
						flag:1,
						user_id: this.id1
					}).then(res => {
						if (res.status === 1) {
							this.getCartDatas()
						} else {
						}
						this.loading1 = false
					})
				} else {
					this.quanxuan1 = false
					arr.forEach(element => {
						element.checked = false
					})
					this.$axios.post('/checkAll', {
						flag:0,
						user_id: this.id1
					}).then(res => {
						if (res.status === 1) {
							this.getCartDatas()
						} else {
						}
						this.loading1 = false
					})
				}
				this.$store.dispatch('goods', this.sum)
			},
			deletes (val) {
				this.$confirm('确定要删除？', '提示', {
					type: 'warning',
					okLabel:'确定',
					cancelLabel:'取消'
				}).then(({ result }) => {
					if (result) {
						this.$axios.get('/deletes?id='+val).then(res => {
							if (res.status === 1) {
								this.$toast.success({
									position: 'top',
									message: '删除成功'
								});
								this.getCartDatas()
							} else {
								this.$toast.error({
									position: 'top',
									message: '删除失败'
								});
							}
							})
					} else {
						this.$toast.message({
							position: 'top',
							message: '取消'
						});
					}
					
				});
				
			}
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .cart_item{
	 .input1 {
	display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 6px;
    top: 39px;
}
}
/deep/ .mu-checkbox {
	position: relative;
    top: 89px;
    z-index: 1;
}
/deep/ .quan > .mu-checkbox {
	position: fixed;
    top: 456px;
    z-index: 3;

}
</style>
